<script setup>
import { defineProps, ref,onMounted,onUnmounted } from 'vue';

const props = defineProps({
  message: {
    type: String,
    required: true
  }
});
const emit=defineEmits(["select"]);
const goods=ref({
  name:'鱼子酱',
  pie:9.9,
  number:100
});
function retGoods(){
//goods为商品信息传递给父组件
  emit("select",goods)
}


import mitter from "../utils/mitt";

// const handleSomeEvent = (payload: string) => {
//   message.value = payload;
// };
// onMounted(() => {
//   mitter.on('someEvent', handleSomeEvent);
//   console.log(handleSomeEvent);

// });
onMounted(() => {
    const listener = (e) => {
        console.log("Event received:", e);
    };

        mitter.on("someEvent", listener);

});

onUnmounted(() => {
    mitter.off("someEvent"); // 确保移除监听器，避免内存泄漏
});
</script>
<template>
   <a-button type="primary" @click="retGoods">选择商品</a-button>
    <el-page-header icon="">
        <template #content>
            {{message}}
            <div class="flex items-center">
                <el-avatar
                    :size="32"
                    class="mr-3"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <span class="text-large font-600 mr-3"> Title </span>
                <span class="text-sm mr-2" style="color: var(--el-text-color-regular)"> </span>
                <el-tag> {{ message }}</el-tag>
            </div>
        </template>
        <template #extra>
            <div class="flex items-center">
                <el-button>Print</el-button>
                <el-button type="primary" class="ml-2">Edit</el-button>
            </div>
        </template>
    </el-page-header>
</template>
